<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="http://www.mobiletrain.org/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2989423_wcg2wl0kqig.css" />
  <link rel="stylesheet" href="./src/CSS/video.css">
  <title>🎸🎙🎷🎤千锋云音乐🎵</title>
</head>

<body>
  <!-- captcha -->
  <section class="captcha" style="visibility: hidden;">
    <h2>
      <span>行为验证码</span>
      <i class="iconfont icon-close"></i>
    </h2>
    <div class="check">
      <img src="./src/imgs/captcha.jpeg" alt="">
      <img src="./src/imgs/captcha_zfx.png" alt="">
    </div>
    <div class="drag">
      <div class="btn"></div>
    </div>
  </section>
  <!-- captcha -->

  <!-- login -->
  <section class="login" style="visibility: hidden;">
    <div class="item">
      <div class="menu"></div>
      <div class="form">
        <p class="close"><i class="iconfont icon-close"></i></p>
        <p class="font">登录/注册</p>
        <input type="text" class="mobile" placeholder="请输入手机号">
        <!-- <p class="msg">请输入手机号</p> -->
        <p class="msg"></p>
        <input type="text" class="password" placeholder="请输入验证码" maxlength="4">
        <!-- <p class="msg">请输入手机号</p> -->
        <p class="msg"></p>
        <button class="captcha">获取验证码</button>
        <button class="submit">登录/注册</button>
      </div>
    </div>
  </section>
  <!-- login -->

  <!-- backTop -->
  <img src="./src/imgs/goTop.png" class="backTop">
  <!-- backTop -->


  <!-- 头 -->
  <header>
    <section>
      <img class="logo" src="./src/logo.png" alt="logo">

      <ul class="navs">
        <li><a href="./index.html">首页</a></li>
        <li><a href="./song.html">歌单</a></li>
        <li><a href="./player.html">🎵音乐盒</a></li>
        <li class="active"><a href="./video.html">🎬小视频</a></li>
      </ul>

      <div class="member">
        <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
        <i class="iconfont icon-sousuo"></i>
        <!-- <img src="./src/imgs/avatar.webp" alt="avatar"> -->
        <div><span>登录</span> <span>/</span> <span>注册</span></div>
      </div>
    </section>
  </header>
  <!-- /头 -->

  <!-- video -->
  <section class="video-wrapper">
    <div class="bg"></div>
    <div class="close"></div>
    <video controls src="./src/mp4/1.mp4"></video>
  </section>
  <!-- video -->

  <!-- 主体 -->
  <section class="video">
    <h1>☁️热门直播</h1>
    <div class="live">
      <video controls src="./src/mp4/1.mp4"></video>
    </div>
    <h1>精彩短视频(〃'▽'〃)</h1>
    <ul>
      <!-- <li>
                <div>
                    <img src="./src/imgs2/1.jpg" alt="">
                </div>
                <span>初秋絮语，用音乐记下你的点点滴滴</span>
                <p>
                    <i class="iconfont icon-aixin"></i>20.6w喜欢
                </p>
            </li>
            <li>
                <div>
                    <img src="./src/imgs2/22.jpg" alt="">
                </div>
                <span>初秋絮语，用音乐记下你的点点滴滴</span>
                <p>
                    <i class="iconfont icon-aixin"></i>20.6w喜欢
                </p>
            </li>
            <li>
                <div>
                    <img src="./src/imgs2/3.jpg" alt="">
                </div>
                <span>初秋絮语，用音乐记下你的点点滴滴</span>
                <p>
                    <i class="iconfont icon-aixin"></i>20.6w喜欢
                </p>
            </li>
            <li>
                <div>
                    <img src="./src/imgs2/42.jpg" alt="">
                </div>
                <span>初秋絮语，用音乐记下你的点点滴滴</span>
                <p>
                    <i class="iconfont icon-aixin"></i>20.6w喜欢
                </p>
            </li> -->
    </ul>
  </section>
  <!-- /主体 -->

  <script src="./src/js/video.js"></script>
  <script src="./src/js/login.js"></script>
  <script src="./src/js/nprogress.js"></script>
</body>

</html>